<template>
  <el-dialog
    v-model="dialogFormVisible"
    :title="title"
    width="500px"
    @close="close"
  >
    <div style="margin-bottom: 15px">
      <el-descriptions
        border
        class="margin-top"
        :column="1"
        size="mini"
        title=""
      >
        <el-descriptions-item>
          <template #label>
            <i class="el-icon-user"></i>
            {{ row.dealType === 0 ? '举报发起人' : '申请用户' }}
          </template>
          {{ row.handleUserPhone }}
        </el-descriptions-item>
        <div v-if="row.dealType === 0">
          <el-descriptions-item>
            <template #label>
              <i class="el-icon-s-custom"></i>
              被举报人
            </template>
            {{ row.targetUserPhone }}
          </el-descriptions-item>
        </div>
        <el-descriptions-item>
          <template #label>
            <i class="el-icon-tickets"></i>
            {{ row.dealType === 0 ? '举报时间' : '发起时间' }}
          </template>
          {{ formatDates(row.handleTime) }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <i class="el-icon-tickets"></i>
            处理时间
          </template>
          {{ formatDates(row.finishTime) }}
        </el-descriptions-item>
        <div v-if="row.dealType === 0">
          <el-descriptions-item>
            <template #label>
              <i class="el-icon-location-outline"></i>
              举报内容
            </template>
            {{
              row.reportType === 0
                ? '用户：'
                : row.reportType === 1
                ? '博客标题：'
                : '评论内容：'
            }}【{{ row.targetBody }}】
          </el-descriptions-item>
        </div>
        <div v-if="row.dealType === 1">
          <el-descriptions-item>
            <template #label>
              <i class="el-icon-location-outline"></i>
              意见标题
            </template>
            {{ row.targetBody }}
          </el-descriptions-item>
        </div>
        <el-descriptions-item>
          <template #label>
            <i class="el-icon-office-building"></i>
            申请原因
          </template>
          {{ row.askReason }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <i class="el-icon-office-building"></i>
            处理意见
          </template>
          {{ row.resultMsg }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <el-alert :closable="false" show-icon type="info">
      <template #title>
        <div v-if="row.dealType === 0">
          管理员
          <B>{{ row.adminUser }}</B>
          将此申请
          <span v-if="row.resultStatus === 1" style="color: #009688">
            通过。
          </span>
          <span v-else style="color: #f34d37">驳回（未通过）。</span>
          <br />
          具体原因以及封号处罚是否执行请见上方“
          <B>处理意见</B>
          ”
        </div>
        <div v-else></div>
      </template>
    </el-alert>
    <template #footer>
      <el-button @click="close">关 闭</el-button>
    </template>
  </el-dialog>
</template>

<script>
  import { defineComponent, getCurrentInstance, reactive, toRefs } from 'vue'
  import moment from '_moment@2.29.1@moment'

  export default defineComponent({
    name: 'TableEdit',
    emits: ['fetch-data'],
    setup() {
      const { proxy } = getCurrentInstance()
      const state = reactive({
        formRef: null,
        title: null,
        list: [],
        row: null,
        dialogFormVisible: false,
      })

      const showEdit = (row) => {
        if (!row) {
          proxy.$baseMessage('数据异常', 'error', 'vab-hey-message-error')
          state.dialogFormVisible = false
        } else {
          state.title = row.dealType === 0 ? '举报结果' : '意见处理'
          state.row = row
        }
        state.dialogFormVisible = true
      }
      const close = () => {
        state.dialogFormVisible = false
        state.row = null
      }
      return {
        ...toRefs(state),
        showEdit,
        close,
      }
    },
    mounted() {},
    methods: {
      formatDates(dateStr) {
        let pattern = 'YYYY-MM-DD HH:mm'
        return moment(parseInt(dateStr + '000')).format(pattern)
      },
    },
  })
</script>
<style>
  /deep/ .el-descriptions__cell,
  .el-descriptions__label,
  .is-bordered-label,
  .is-left {
    width: 80px !important;
  }
</style>
